@import "~antd/lib/style/themes/default.less";
@import "./utils/utils.less";

:global {
  body {
    min-width: 1000px;
  }


  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  /*  ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
      background-color: #F5F5F5; }

    !*定义滚动条轨道 内阴影+圆角*!
    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(23, 23, 23, 0.3);
      border-radius: 10px;
      background-color: #F5F5F5; }

    !*定义滑块 内阴影+圆角*!
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(23, 23, 23, 0.3);
      background-color: rgba(0,0,0,0.2); }*/

  .inline-block {
  }

  .btn-cyan {
    background-color: #13c2c2 !important;
    border-color: #13c2c2 !important;

    &:hover {
      background-color: #36cfc9 !important;
      border-color: #36cfc9 !important;
    }
  }
  .table-status{
    color: #fff;
    padding: 3px;
    margin-bottom: 0 !important;
  }
  .table-warm{
    background: #ff9800;
  }
  .table-error{
    background: #fb3400;
  }
  .table-success{
    background: #1e9680;
  }
  .table-process{
    background: #0072ff;
  }
  .AsyncSpin {
    width: 100%;
    margin: 149px 0;
  }

  .align-center {
    text-align: center;
  }

  .tableList {
    .tableListOperator {
      margin-bottom: 16px;
      //margin-top: 16px;
      button {
        margin-right: 8px;
      }
    }
  }

  .ant-progress-inner {
    background: #e0e0e0;
  }

  .tableListForm {
    margin-bottom: 6px;

    .ant-form-item {
      margin-bottom: 24px;
      margin-right: 5px;
      //display: inline-block !important;
      > .ant-form-item-label {
        //line-height: 38px;
        //padding-right: 8px;
      }
    }

    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }

  .content .tableListForm {
    .ant-form-item {
      margin-bottom: 0px !important;
    }
  }

  .screen-sm, .screen-xs {
    .content .tableListForm {
      .ant-form-item {
        margin-bottom: 3px !important;
      }

      .ant-form-item:not(.openOperate) > .ant-form-item-control-wrapper, .ant-form-item:not(.openOperate) > .ant-form-item-label {
        display: block !important;
      }
    }
  }

  .submitButtons {
    display: block;
    white-space: nowrap;
    margin-bottom: 24px;
  }

  .description {
    width: 150px;

    .edit {
      display: none;
    }
  }

  //.ant-divider {
  //  margin: 0 6px;
  //  display: inline-block;
  //  height: 8px;
  //  width: 1px;
  //  background: #ccc;
  //}
  .big-meter-description {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .big-meter-divider {
    margin: 4px 0;
  }

  .description:hover {
    .edit {
      display: inline-block;
    }
  }

  .addInDevice {
    text-align: center;
    margin-bottom: 15px;

  }

  .small-table-desc {
    margin-bottom: 15px;

    span {
      margin-right: 5px;
    }
  }

  fieldset {
    border: 1px solid #cccccc;
    padding-top: 15px !important;
    border-radius: 2px;

    legend {
      .anticon {
        color: @primary-color;
        margin-right: 5px;
      }

      width: auto !important;
    }
  }

  .pagination {
    float: right;
  }

  .dynamic-data, .proportion-data, .concentratorOnline, .guage, .areasupplylist, .DMArate, .VendorConcentrator, .site-data, .leak-date, .concentratorOffline,
  .last-30days-water-consumption, .last-12months-water-consumption, .member-analysis, .member-rate-analysis, .concentratorMap, .month-analysis, .day-analysis, .value-analysis, .liquidPosition-data {
    width: 100%;
    height: 330px;
  }

  .value-analysis {
    width: 100%;
    height: 500px;
  }

  .concentratorMap {
    width: 100%;
    height: calc(~'100vh - 200px');
  }

  .showRouteMap {
    width: 100%;

  }

  .PressureLineChart {
    width: 100%;
    height: 350px;
  }

  .site-data-chart {
    width: 100%;
    height: 300px;
  }

  .dma-data {
    width: 100%;
    height: 375px;
  }

  .mapData {
    height: calc(~'100vh - 114px');
  }

  .concentrator-num, .meter-num, .fine-num, .upload-num {
    display: inline-block;
    width: 50%;
    height: 400px;
    position: relative;

  }

  .table-content {
    margin-top: 10px;
    max-height: 500px;
    overflow-y: auto;
  }

  .separate {
    height: 10px
  }

  .custom-table-error {
    background: #ffb9c5;

    tr {
      &:nth-of-type(even) {
        background: #ffb9c5 !important;
      }
    }
  }

  .custom-table {
    border: 1px solid #e9e9e9;
    width: 100%;
    margin-bottom: 10px;
    font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    thead {
      font-weight: bold;
      background: #F0F0F0;

      .table-header-1 {
        width: 120px;
      }
    }

    tbody {

      tr {
        transition: background 0.3s;

        &:nth-of-type(odd) {
          background: #f9f9f9;
        }

        td:first-child {
          text-align: right;
        }

        &:hover {
          background: #e6f7ff;
        }
      }
    }

    td, th {
      padding: 5px;
      //border: 1px solid #999;
      border-right: 1px solid #e9e9e9;
      border-bottom: 1px solid #e8e8e8;
      word-wrap: break-word;
    }
  }

  .ant-tree.ant-tree-show-line.hide-file-icon li span.ant-tree-switcher-noop {
    background: transparent;
  }

  .ant-tree.ant-tree-show-line.hide-file-icon li:before {
    content: " ";
    width: 1px;
    border-left: 1px solid #9a9a9a;
    height: 100%;
    position: absolute;
    left: 12px;
    top: 0;
    margin: 0;
  }

  .ant-tree.ant-tree-show-line.hide-file-icon li:first-child:before {
    top: 6px;
    height: calc(100% - 6px);
  }

  .ant-tree.ant-tree-show-line.hide-file-icon li:last-child:before {
    height: 16px;
  }

  .ant-tree.ant-tree-show-line.hide-file-icon li:first-child:last-child:before {
    height: 10px;
  }

  .ant-tree.ant-tree-show-line.hide-file-icon li .ant-tree-switcher-noop > i {
    visibility: hidden;
  }

  .ant-tree.ant-tree-show-line.hide-file-icon li .ant-tree-switcher-noop:after {
    content: " ";
    height: 1px;
    border-bottom: 1px solid #9a9a9a;
    width: 10px;
    position: absolute;
    left: 12px;
    top: 50%;
    margin: 0;
  }

  .ant-tree.ant-tree-show-line li span.ant-tree-switcher {
    background-color: #f1f1f1;
  }

  .ant-menu-dark .ant-menu-item-selected > a {
  }

  .ant-table-small .error {
    .link {
      color: #f5222d;
    }

    color: #f5222d;
  }

  .ant-table-small .selected {
    background: #e6f7ff !important;
  }

  .ant-table-small .link {
    cursor: pointer;
    color: #1890ff;
    text-decoration: underline;
  }

  .concentrator-num:after, .fine-num:after {
    position: absolute;
    content: '';
    width: 1px;
    height: 100%;
    background: #e8e8e8;
    right: 0;
    top: 0;
  }

  .table-index {
    text-align: center;
  }

  .form-title {
    text-align: center;
    font-size: 20px;
    margin-bottom: 12px;
  }

  .checkgroup-title {
    border-bottom: 1px solid #E9E9E9;
    margin-bottom: 12px;
  }

  .desc-title, .desc-detail {
    line-height: 22px;
    padding-bottom: 16px;
    color: rgba(0, 0, 0, 0.65);
    display: table-cell;
    vertical-align: top;
  }

  .desc-title {
    white-space: nowrap;
    color: rgba(0, 0, 0, 0.95);

    &:after {
      content: ":";
      margin: 0 8px 0 2px;
      position: relative;
      top: -0.5px;
    }
  }

  .edit {
    color: lighten(@primary-color, 10%);
    cursor: pointer;
  }

  .float-tag {
    float: left;
    display: inline-block;
    background: lighten(@primary-color, 10%);
    color: #ffffff;
    padding: 5px 5px;
    margin: 5px;
  }

  .floatRight {
    float: right;
  }

  .react-resizable {
    position: relative;
  }

  .react-resizable-handle {
    position: absolute;
    width: 10px;
    height: 100%;
    bottom: 0;
    right: -5px;
    cursor: col-resize;
  }

  .ant-table-fixed-right .react-resizable-handle {
    display: none;
  }

  .screen-xs {
    .showToggle {
      opacity: 0.2 !important;
    }
  }

  .layout {
    height: calc(~'100vh - 68px');
    overflow: hidden;
    flex-direction: row;
    display: -webkit-box !important;

    .sider {
      //position: fixed;
      background: url("./images/sider-water.png") no-repeat bottom;
      background-size: 100%;
      background-color: #f1f1f1 !important;
      height: 100%;
      width: 210px;
      position: relative;

      &::after {
        content: ' ';
        width: 2px;
        height: 100%;
        display: block;
        position: absolute;
        right: 0;
        background: #ccc;
        top: 0;
      }

      .sider-title {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        height: 46px;
        line-height: 46px;
        border-bottom: 1px solid #e8e8e8;
        padding-left: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .ant-tree-show-line {
        padding-left: 12px;
      }

      .ant-layout-sider-children {
        overflow-Y: scroll;
      }

      .treeItem {
        overflow: hidden;
      }

      .toggle {
        cursor: pointer;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 45px;
        background: #002140;
        text-align: center;
        color: white;
        font-size: 20px;
        line-height: 45px;
      }

      .screen-xs {
        .showToggle {
          opacity: 0.5 !important;
        }
      }

      .sider-content {
        position: relative;
        width: 100%;
      }

      .hideSider {
        position: absolute;
        left: 0;
        right: 0;
        border: 0;
        top: 0;
        height: 100%;
        background: #f1f1f1;
      }
    }

    .ant-layout-content {
      background: rgb(255, 255, 255);
      flex: 1;
      height: 100%;
    }

    .content {
      .content-container {
        margin: 24px 24px 0;
      }
    }
  }

  .showToggle {
    transition: width 0.3s;
    transition-duration: 0.3s;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 100%;
    height: 45px;
    width: 45px;
    background: #002140;
    text-align: center;
    color: white;
    font-size: 20px;
    line-height: 45px;
    z-index: 999;
  }

  .realData {
    position: fixed;
    width: 420px;
    height: 250px;
    right: 0;
    bottom: 0;
    transition: right ease 0.3s;
    //overflow-y: auto;
    background: #ffffff;
    border-left: 1px solid #cccccc;
    border-top: 1px solid #cccccc;

    .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td,
    .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td,
    .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td,
    .ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td,
    .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th,
    .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th,
    .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th {
      padding: 3px !important;;
      font-size: 12px;
    }

    .showToggle {
      left: -45px;
      bottom: 0;
    }
  }

  .realData-collapsed {
    right: -420px;
  }

  .screen-lg {
    .realData {
      width: 500px;
    }

    .realData-collapsed {
      right: -500px;
    }
  }

  .screen-xl {
    .realData {
      width: 550px;
    }

    .realData-collapsed {
      right: -550px;
    }
  }

  .ant-modal .ant-form-item {
    margin-bottom: 12px !important;
  }

  .ant-modal {
    padding-bottom: 0 !important;
  }

  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background: @primary-color !important;
  }

  .ant-tree {
    font-size: 16px !important;
  }

  .ant-tree.ant-tree-show-line li span.ant-tree-switcher.ant-tree-switcher_close:after, :root .ant-tree.ant-tree-show-line li span.ant-tree-switcher.ant-tree-switcher_open:after, :root .ant-tree.ant-tree-show-line li span.ant-tree-switcher.ant-tree-switcher-noop:after {
    font-size: 18px !important;
    color: @primary-color;
  }

  //.ant-tree.ant-tree-show-line li.concentrator span.ant-tree-switcher.ant-tree-switcher-noop:after {
  //  content: "\E951" !important;
  //}
  //.ant-tree.ant-tree-show-line li.village span.ant-tree-switcher.ant-tree-switcher-noop:after {
  //  content: "\E65E" !important;
  //}
  .ant-back-top {
    right: 24px;

    .ant-back-top-content {
      background: @primary-color;
    }
  }

  .ant-card-hoverable {
    cursor: auto !important;
  }

  .ant-modal {
    .ant-input-number, .ant-calendar-picker {
      width: 100%;
    }
  }

  .ant-list-item-content {
    width: 100%;
    overflow: hidden;
  }

  .ant-table-placeholder {
    z-index: 0 !important;
  }

  .ant-steps-label-vertical .ant-steps-item-description {
    text-align: center !important;
  }

  .ant-table-small .ant-table-header > table, .ant-table-small .ant-table-body > table {
    padding: 0 !important;
  }

  .ant-table-small .ant-table-thead > tr > th, .ant-table-header {
    background: #F0F0F0 !important;
  }

  .ant-menu-vertical .ant-menu-item {
    display: block;
  }

  .ant-table-small .ant-table-thead > tr > th, .ant-table-small .ant-table-tbody > tr > td {
    border-right: 1px solid #e9e9e9;
  }

  .ant-table-small .ant-btn-sm {
    margin-right: 5px;

    &:last-child {
      margin-right: 0;
    }
  }

  .ant-table-small {
    .ant-table-tbody {
      tr:nth-child(odd) {
        background-color: #FFFFFF;
      }

      tr:nth-child(even) {
        background-color: #f9f9f9;
      }
    }
  }

  .ant-pagination-item:focus {
    //border-color: #d9d9d9 ;
  }

  .no-interval .ant-table-small {
    .ant-table-thead > tr.ant-table-row-hover > td,
    .ant-table-tbody > tr.ant-table-row-hover > td,
    .ant-table-thead > tr:hover > td,
    .ant-table-tbody > tr:hover > td {
      background: none !important;
    }
  }

  .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td,
  .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td,
  .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td,
  .ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td,
  .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th,
  .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th,
  .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th {
    padding: 6px !important;;
  }

  .ant-table-small .ant-table-thead > tr > th[class^=vendor-meter], td[class^=vendor-meter] {
    border: 1px solid #000c17 !important;
    color: #2e2e2e !important;
    padding: 4px !important;
  }

  .ant-table-small .ant-table-thead > tr > th[class^=vendor-meter1], td[class^=vendor-meter1] {
    background: #ededed !important;
  }

  .ant-table-small .ant-table-thead > tr > th[class^=vendor-meter2], td[class^=vendor-meter2] {
    background: #e2efda !important;
  }

  .ant-table-small .ant-table-thead > tr > th[class^=vendor-meter3], td[class^=vendor-meter3] {
    background: #ddebf7 !important;
  }

  .ant-table-small .ant-table-thead > tr > th[class^=vendor-meter4], td[class^=vendor-meter4] {
    background: #fce4d6 !important;
  }

  .ant-table-small .ant-table-thead > tr > th.white-bg, td.white-bg {
    border: 1px solid #000c17 !important;
    background: #fff !important;
    color: #2e2e2e !important;
    padding: 4px !important;
  }

  .ant-popover-inner-content {
    //padding: 0 !important;
  }

  .popover .item {
    border-bottom: 1px solid #cccccc;
    padding: 5px;
  }

  .ant-progress-text {
    margin-left: 0 !important;
  }

  .ant-list .ant-row {
    margin: 0 !important;
  }

  .ant-menu-submenu-popup {
    z-index: 999;
  }

  .screen-lg {
    .ant-menu-item, .ant-menu-submenu-title {
      padding: 0 10px !important;
    }
  }

  .screen-md {
    .ant-menu-item, .ant-menu-submenu-title {
      padding: 0 3px !important;
    }
  }

  .screen-sm, .screen-xs {
    .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td, .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td, .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td, .ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td, .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th {
      padding: 4px !important;
    }
  }
  .rst__rowLabel{
    padding-right: 5px !important;
  }
  .rst__rowContents{
    min-width: auto !important;
  }
  .map-tip {
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.7);
    position: absolute;
    top: 16px;
    left: 0;
    border-radius: 4px;

    .ant-form-item {
      margin-bottom: 0 !important;
      margin-right: 6px !important;
    }
  }

  .ant-divider, .ant-divider-vertical {
    margin: 0 5px;
  }

  .ant-modal-close-x {
    color: #fff !important;
  }

  .ant-modal-header {
    background: #2f54eb !important;

    .ant-modal-title {
      color: #fff !important;
    }
  }

  .ant-form-item {
    margin-bottom: 12px !important;
  }

  .my-pagination {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 10px;
    border-top: 1px solid #e8e8e8;

    .pagination {
      margin-top: 8px !important;
    }
  }

  .sort-content {

    .ant-tabs-top > .ant-tabs-bar {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  .ant-tabs-top > .ant-tabs-bar {
    background: #fafafa !important;
    border-bottom: solid 2px #222d32 !important;
    margin-top: 10px;

    * {
      transition: none !important;
    }
  }

  .ant-tabs-top > .ant-tabs-bar .ant-tabs-nav-container {
    height: 41px !important;
  }

  .ant-tabs-top > .ant-tabs-bar .ant-tabs-tab {
    border: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    color: #222d32 !important;
    line-height: 40px !important;
    padding: 0 16px;
  }

  .ant-tabs-top > .ant-tabs-bar .ant-tabs-nav .ant-tabs-tab-active {
    color: #fff !important;
    background: #222d32 !important;
  }

  .ant-tabs-top > .ant-tabs-bar .ant-tabs-tab-active.ant-tabs-tab .ant-tabs-close-x {
    color: #fff !important
  }

  .ant-tabs-top > .ant-tabs-bar .ant-tabs-ink-bar {
    display: none !important;
  }

  .alarm-tabs {
    .ant-tabs-tabpane {
      .alarm-tabs-content {
        height: calc(~'100vh - 275px');
        overflow-y: auto;
      }

    }
  }

  .alarm-item {
    width: 193px;
    padding: 10px 15px;
    background: #CCCCCC;
    margin-right: 10px;
    margin-bottom: 10px;
    background-image: linear-gradient(to bottom, #f78f27, #f25b20);
    color: #ffffff;
    text-align: center;
    border-radius: 4px;
    float: left;

    &:hover {
      background-image: linear-gradient(to bottom, #fa9127, #f6662b);
    }

    h2 {
      font-size: 18px;
      color: #ffffff;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .alarm-item-number {
      font-size: 14px;
      color: #eeeeee;
    }

    .alarm-item-value {
      line-height: 1;

      span {
        font-size: 18px;
        color: #1d1d1d;

        font-weight: 500;
      }
    }

    button {
      margin-top: 8px;
      margin-right: 8px;
    }
  }

  .rst__rowWrapper {
    padding: 8px 8px 0 0
  }

  .sider-resize {
    width: 210px;
    position: relative;
    min-height: calc(~'100vh - 68px');
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .custom-handle {
    width: 3px;
    height: 100%;
    display: block;
    position: absolute;
    background: #ccc;
    right: 0;
    bottom: 0;
    cursor: e-resize;
    z-index: 89;
  }

  .ant-notification-notice .ant-progress-text {
    color: #2668dd;
    font-size: 16px;
    margin-left: 3px !important;

  }
  .hy-company{
    //background: #ffffff;
  }
  .other-company{
    background: #145ecb;
    .homepage-content {

      .ant-input, .ant-select-selection {
        background-color: transparent;
        color: #ffffff;
      }

      .ant-calendar-picker-icon {
        color: #fff
      }

      .ant-card {
        background: rgba(0, 0, 0, 0.25);
        border-radius: 5px;

        .ant-card-head {
          color: #24fff9;
        }

      }
    }
  }

  .rst__rowWrapper {
    padding: 8px 8px 0 0 !important;
  }

  .rst__lineHalfHorizontalRight::before {
    height: 4px !important;
    top: 45% !important;
    right: 0 !important;
    width: 50% !important;
    background: url("./images/turnRight.gif") no-repeat bottom center;
  }
  .rst__lineFullVertical::after, .rst__lineHalfVerticalTop::after, .rst__lineHalfVerticalBottom::after {
    width:  4px !important;
    left: 45% !important;
    top: 0;
    background: url("./images/turnBottom.gif") no-repeat bottom center;
  }
  .rst__lineHalfHorizontalRight::before, .rst__lineFullVertical::after, .rst__lineHalfVerticalTop::after, .rst__lineHalfVerticalBottom::after {
    position: absolute;
    content: '';
    background-color: #2196F3 !important;
  }


  .ant-tabs-top > .ant-tabs-bar {
    background: #fafafa !important;
    border-bottom: solid 2px #222d32 !important;
    margin-top: 10px;
    * {
      transition: none !important;
    }
  }

  .ant-tabs-top > .ant-tabs-bar .ant-tabs-nav-container {
    height: 41px !important;
  }

  .ant-tabs-top > .ant-tabs-bar .ant-tabs-tab {
    border: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    color: #222d32 !important;
    line-height: 40px !important;
    padding: 0 16px;
  }

  .ant-tabs-top > .ant-tabs-bar .ant-tabs-nav .ant-tabs-tab-active {
    color: #fff !important;
  }

  .ant-tabs-top > .ant-tabs-bar .ant-tabs-tab-active.ant-tabs-tab .ant-tabs-close-x {
    color: #fff !important
  }

  .ant-tabs-top > .ant-tabs-bar .ant-tabs-ink-bar {
    display: none !important;
  }

  .ant-tabs-small-bar.ant-tabs-bar{
    .ant-tabs-nav-container {
      height: 35px !important;
    }
  }
  .ant-tabs-top > .ant-tabs-small-bar.ant-tabs-bar {
    border-bottom: solid 1px #222d32 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    color: #222d32 !important;
    line-height: 35px !important;
    padding: 0 ;
  }
  .ant-tabs .ant-tabs-small-bar .ant-tabs-tab{
    padding: 0 12px !important;
  }
  .ant-tabs-top > .ant-tabs-small-bar.ant-tabs-bar .ant-tabs-tab{
    line-height: 35px !important;
    min-width: 100px;
    text-align: center;
  }
  .ant-tabs-nav .ant-tabs-tab-active {
    background: #222d32  !important;
    color: #ffffff !important;
  }

  .react-grid-Grid{
    user-select: text !important;
    color: #000;
  }

  .react-grid-Row.row-selected:hover .react-grid-Cell{
    background-color: #dbecfa!important;
  }
  .react-grid-Row--odd .react-grid-Cell{
    background-color: #f9f9fe;
  }

  .ant-modal-header{
    background: #2f54eb !important;
    padding: 12px 24px !important;
    .ant-modal-title{
      color: #fff !important;
    }
  }
  .ant-drawer-header{
    background: #0082f4 !important;

    .ant-drawer-title{
      color: #FFFFFF;
      font-weight: bold;
    }

  }
  .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
    padding: 8px 16px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .ant-descriptions-item-label{
    color: #000 !important;
  }

  .ant-descriptions-item-content{
    color: #000 !important;
    font-weight: bold;
  }
  .meter-background{
    width: 400px;
    height: 288px;
    overflow: hidden;
    background: url("./images/waterModel.png")  no-repeat center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    .meter-value{
      position: relative;
      top: -3px;
      font-size: 36px;
      left: -4px;
      font-family: DIGIT;
      span{
        margin-right: 4px;
      }
    }
  }
}

@media screen and (max-width: @screen-lg) {
  .tableListForm :global(.ant-form-item) {
    margin-right: 24px;
  }
}

@media screen and (max-width: @screen-md) {
  .tableListForm :global(.ant-form-item) {
    margin-right: 8px;
  }

}

@media screen and (max-width: @screen-sm) {
  :global {
    .tableListForm {
      //background: #91d5ff;
      .ant-form-item-label, .ant-form-item-control-wrapper {
        //z-index: 999;
        width: inherit !important;
      }

      .ant-form-item-label {
        padding: 0 !important;
      }
    }

    .ant-pagination-options {
      display: inline-block;
    }
  }
}

@media screen and (max-width: @screen-sm) {
  :global {
    .dynamic-data, .proportion-data, .concentratorOnline, .guage, .areasupplylist, .DMArate, .VendorConcentrator, .site-data, .leak-date, .concentratorOffline,
    .last-30days-water-consumption, .last-12months-water-consumption, .member-analysis, .member-rate-analysis, .concentratorMap, .month-analysis, .day-analysis {
      width: 100%;
      height: 350px;
    }
  }
}


